<script>
import {ref} from "vue";
import axios from "axios";

export default {
  //组件部件
  setup(){
    const dialogVisible1 = ref(false);
    const dialogVisible2 = ref(false);
    return {
      dialogVisible1,
      dialogVisible2,
    }
  },
  data(){
    return {
      pageDto:{
        pageSize:3,
        pageNum:1,
        data:{
          userName1:"",
          realName1:""
        }
      },
      SystemUserList:[],
      total:0,
      pages:0,
      users:{
        username:"",
        passwordHash: "",
        realName: "",
        email: "",
        departmentId: "",
        roleId: "",
        title: "",
        gender: 1,
        status: 1
      },
      queryRolesList:[],
      queryDepartmentsList:[],
      updateUserList:[]
    }
  },
  methods:{
    getData:function(){
      console.log(this.pageDto)
      //以json格式传参
      axios.post("/oa/users/querySystemUserList",this.pageDto).then((res)=>{
        console.log(res.data.data)
        this.pageDto.pageNum=res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total=res.data.data.total;
        this.pages=res.data.data.pages;
        this.SystemUserList=res.data.data.list;
      })
    },
    //获取角色表数据
    queryRoles() {
      axios.post('/oa/users/queryRolesList').then((data) => {
            this.queryRolesList = data.data.data
          }
      )
    },
    //获取部门表数据
    queryDepartments() {
      axios.post('/oa/users/queryDepartmentsList').then((data) => {
        console.log(data.data.data)
            this.queryDepartmentsList = data.data.data
          }
      )
    },
      insertUser:function(){//新增
        if(this.users.username === null || this.users.username === undefined || this.users.username === ""){
          this.$message({
            type: 'warning',
            message: '登入名不能为空!'
          });
          return;
        }
        if(this.users.passwordHash === null || this.users.passwordHash === 0 ||this.users.username === undefined){
          this.$message({
            type: 'warning',
            message: '密码不能为空!'
          });
          return;
        }
        if(this.users.realName === null || this.users.realName === ""){
          this.$message({
            type: 'warning',
            message: '真实姓名不能为空!'
          });
          return;
        }
        if(this.users.email === null || this.users.email === undefined || this.users.email === ""){
          this.$message({
            type: 'warning',
            message: '电子邮箱不能为空!'
          });
          return;
        }
        if(this.users.departmentId === null || this.users.departmentId === ''){
          this.$message({
            type: 'warning',
            message: '请选择所在部门!'
          });
          return;
        }
        if(this.users.roleId === null || this.users.roleId === ''){
          this.$message({
            type: 'warning',
            message: '请选择角色!'
          });
          return;
        }
        if(this.users.title === null || this.users.title === undefined || this.users.title === ''){
          this.$message({
            type: 'warning',
            message: '请选择职称!'
          });
          return;
        }
        axios.post('/oa/users/insertUser', this.users).then(res=>{
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
          this.users= {}
          this.getData()
          this.dialogVisible1 = false;
        })
      },

    deleteUser(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/oa/users/deleteUser/${row.userId}`)
            .then((res) => {
              console.log(res.data.code+"----------")
              if(res.data.data === true){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getData();
              }else {
                this.$message({
                  type: 'error',
                  message: '管理员、技术员、人事专员、财务专员、销售代表不可删除!'
                });
              }
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    },
    queryUserById(index, userId){//修改_获取数据
      this.dialogVisible2 = true;
      axios.get(`/oa/users/queryUserById/${userId}`)
          .then((res) => {
            console.log(res)
            this.updateUserList = res.data.data
          })
          .catch((error) => {
            console.log(error)
          })
    },
    updateUser(){
      axios.put("/oa/users/updateUser",this.updateUserList)
          .then( (data)=>{
            if(data.data){
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogVisible2 = false
              this.getData()
            }else {
              this.$message({
                type: 'error',
                message: '修改失败!'
              });
              this.dialogVisible2 = false
            }
          })
          .catch((error)=>{
            console.log(error)
          });
    },addBuuton(){
      this.dialogVisible1 = true
      this.users={}
      this.users.gender=1
      this.users.status=1
    }
  },
  created() {
    this.getData();
    this.queryRoles()
    this.queryDepartments()
  }
}
</script>

<template>
  <div>
    <div class="titleBox" >用户管理</div>
    <br>
    <div>
      <!-- 首页表格信息显示 -->
      <div class="mt-4">
        用户名:
        <el-input
            v-model="this.pageDto.data.userName1"
            style="max-width: 150px"
            placeholder="请输入用户名"
        >

        </el-input>
        &nbsp;&nbsp;
        真实姓名:
        <el-input
            v-model="this.pageDto.data.realName1"
            style="max-width: 150px"
            placeholder="请输入真实姓名"
        >
        </el-input>&nbsp;&nbsp;
        <el-button @click="getData">
          查询
        </el-button>
        <el-button  @click="addBuuton()">新增</el-button>
      </div>
      <el-table :data="this.SystemUserList" style="width: 100%">

        <el-table-column label="编号：">
          <template #default="scope">
            <div style="display: flex; align-items: center">

              <span style="margin-left: 10px">{{ scope.row.userId}}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="用户名：">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.userName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="真实姓名：">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.realName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="角色：">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="部门：">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">
                {{ scope.row.departmentName }}

              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态：">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">
                <span v-if="scope.row.status === 1" style="margin-left: 10px">可用</span>
              <span v-if="scope.row.status === 0" style="margin-left: 10px">冻结</span>
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作：">
          <template #default="scope">
            <el-button size="small" @click="queryUserById(scope.$index, scope.row.userId)">
              修改
            </el-button>
            <el-button size="small" type="danger" @click="deleteUser(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>



      <!-- 分页-->
      <el-pagination
          v-model:current-page="this.pageDto.pageNum"
          :page-size="this.pageDto.pageSize"
          :pager-count="this.pages"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="getData"
      />
    </div>
  </div>

  <el-dialog
      v-model="dialogVisible2"
      title="修改用户"
      width="500"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="登录名：" prop="userCord">
        <el-input
            v-model="this.updateUserList.username"
            type="text"
            autocomplete="off"
            aria-required="true"
        />

      </el-form-item>
      <el-form-item label="密码：" prop="userCord">
        <el-input
            v-model="this.updateUserList.passwordHash"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

      <el-form-item label="真实姓名：" prop="userCord">
        <el-input
            v-model="this.updateUserList.realName"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>
      <el-form-item label="电子邮件：" prop="userCord">
        <el-input
            v-model="this.updateUserList.email"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

      <el-form-item label="所在部门：" prop="userCord">
        <el-select v-model="this.updateUserList.departmentId" style="width: 240px" placeholder="-请选择所在部门-">
          <el-option
              v-for="item in queryDepartmentsList"
              :label="item.departmentName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="角色：" prop="userCord">
        <el-select v-model="this.updateUserList.roleId" style="width: 240px" placeholder="-请选择角色-">
          <el-option
              v-for="item in queryRolesList"
              :label="item.roleName"
              :value="item.roleId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="职称：" prop="userCord">
        <el-select v-model="this.updateUserList.title" style="width: 240px" placeholder="-请选择职称-">
          <el-option
              label="普通职员"
              value="普通职员"
          />
          <el-option
              label="部门经理"
              value="部门经理"
          />
          <el-option
              label="助理"
              value="助理"
          />
          <el-option
              label="总监"
              value="总监"
          />
          <el-option
              label="总经理"
              value="总经理"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性别：" prop="userCord">
        <el-radio-group v-model="this.updateUserList.gender">
          <el-radio label="男" :value="1">男</el-radio>
          <el-radio label="女" :value="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态：" prop="userCord">
        <el-radio-group v-model="this.updateUserList.status">
          <el-radio label="可用" :value="1">可用</el-radio>
          <el-radio label="冻结" :value="0">冻结</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateUser()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="dialogVisible1"
      title="添加用户"
      width="450"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="登录名" prop="userCord">
        <el-input
            v-model="users.username"
            type="text"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入登入名"
        />

      </el-form-item>
      <el-form-item label="密码" prop="userCord">
        <el-input
            v-model="users.passwordHash"
            type="text"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入密码"
        />
      </el-form-item>

      <el-form-item label="真实姓名" prop="userCord">
        <el-input
            v-model="users.realName"
            type="text"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="电子邮件" prop="userCord">
        <el-input
            v-model="users.email"
            type="text"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入电子邮件"
        />
      </el-form-item>

      <el-form-item label="所在部门" prop="userCord">
        <el-select v-model="users.departmentId" style="width: 240px" placeholder="-请选择所在部门-">
          <el-option
              v-for="item in queryDepartmentsList"
              :label="item.departmentName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="角色" prop="userCord">
        <el-select v-model="users.roleId" style="width: 240px" placeholder="-请选择角色-">
          <el-option
              v-for="item in queryRolesList"
              :label="item.roleName"
              :value="item.roleId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="职称" prop="userCord">
        <el-select v-model="users.title" style="width: 240px" placeholder="-请选择职称-">
          <el-option
              label="普通职员"
              value="普通职员"
          />
          <el-option
              label="部门经理"
              value="部门经理"
          />
          <el-option
              label="助理"
              value="助理"
          />
          <el-option
              label="总监"
              value="总监"
          />
          <el-option
              label="总经理"
              value="总经理"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="userCord">
        <el-radio-group v-model="users.gender">
          <el-radio label="男" :value="1">男</el-radio>
            <el-radio label="女" :value="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="userCord">
        <el-radio-group v-model="users.status">
          <el-radio label="可用" :value="1">可用</el-radio>
          <el-radio label="冻结" :value="0">冻结</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="insertUser()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="less">

</style>
